<template>
  <div class="system-tray">
    <!-- 系统图标 -->
    <div class="tray-icons">
      <el-tooltip content="网络" placement="top">
        <button class="tray-icon">
          <el-icon><Connection /></el-icon>
        </button>
      </el-tooltip>
      <el-tooltip content="音量" placement="top">
        <button class="tray-icon">
          <el-icon><Headset /></el-icon>
        </button>
      </el-tooltip>
      <el-tooltip content="通知" placement="top">
        <button class="tray-icon" @click="$emit('show-notifications')">
          <el-icon><Bell /></el-icon>
        </button>
      </el-tooltip>
    </div>

    <!-- 时钟 -->
    <SystemClock
      :time="time"
      :date="date"
      @click="$emit('show-calendar')"
    />
  </div>
</template>

<script setup>
import { Connection, Headset, Bell } from '@element-plus/icons-vue'
import SystemClock from './SystemClock.vue'

defineProps({
  time: {
    type: String,
    required: true
  },
  date: {
    type: String,
    required: true
  }
})

defineEmits(['show-notifications', 'show-calendar'])
</script>

<style scoped>
.system-tray {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.tray-icons {
  display: flex;
  gap: 4px;
}

.tray-icon {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border-radius: 4px;
  transition: background 0.2s;
}

.tray-icon:hover {
  background: rgba(255, 255, 255, 0.1);
}
</style>

